<template>
  <!-- 积分管理 -->
  <view class="points-content">
    <view class="points-title">
      <view class="mb-40 flex justify-between items-center">
        <view class="tit" >我的积分</view>
        <view class="tit" style="color: rgba(214, 142, 68, 1);" @click="onpointsruleDetail">积分规则</view>
      </view>
      <view class="nums">积分: <text class="ml-10">{{ integration }}</text></view>
    </view>
    <view class="points-info">
        <up-tabs :list="list1" @click="handleClick" lineColor="rgba(214, 142, 68, 1)" itemStyle="flex:1; height: 48px;" :activeStyle="{color: 'rgba(214, 142, 68, 1)'}"></up-tabs>
        <view class="flex justify-between items-center" style="font-size: 12px; color: rgba(0, 0, 0, 0.4); padding: 16rpx 0">
          <view>时间</view>
          <view>积分</view>
        </view>
        <view v-if="MyIntegrationRecordlist.length>0">
          <view v-for="(item,index) in MyIntegrationRecordlist" :key="index" class="flex justify-between items-center my-42" style="font-size: 12px; color: rgba(0, 0, 0, 0.6); padding: 16rpx 0">
            <view>{{ item.createTime }}</view>
            <view>{{ item.integration }}</view>
          </view> 
        </view>
        <view v-else class="flex justify-center items-center bg-white">
          <Empty :emptyInfo="emptyInfo" />
        </view>
        <up-divider v-if="MyIntegrationRecordlist.length>pageSize"  :text="loadStatus"></up-divider>
    </view>
  </view>
</template>

<script setup>
import { reactive } from 'vue';
import { IMG_URL2 } from "@/config";
import Empty from "@/components/empty.vue";
import { studyApi } from "@/api";
// 创建响应式数据  
const list1 = reactive([
  { name: '获得记录' },
  { name: '使用记录' }
]);
let integration=ref(0)
const EmptyImage = ref(IMG_URL2 + "empty/normal.png");
const emptyInfo = ref({
  image: EmptyImage,
  width: 300,
  height: 300,
  tip: "暂无积分数据~"
});
let MyIntegrationRecordlist=ref([])
let pageSize = ref(10)
let currentPage = ref(1)
let totalCount = ref(0)
let isGetRecord = ref(true) //true 获得记录 false 使用记录
let loadStatus =ref('正在加载中')
// 定义方法  
function handleClick(item) {
  currentPage.value=1
  MyIntegrationRecordlist.value=[]
  if(item.index==1){
    isGetRecord.value=false
  }else{
    isGetRecord.value=true
  }
  getData(isGetRecord.value,1)
}
const getData = (isGetRecord,type)=>{
  let data={
    "currentPage": currentPage.value,
    "isGetRecord": isGetRecord,
    "pageSize": pageSize.value
  }
  studyApi.STAFFGETMYINTEGRATIONRECORD(data).then((res) => {
    if(res.code==200){
      
      totalCount.value=res.result.totalCount
      res.result.data.forEach(element => {
          if (element.integration >= 0) {
            element.integration = '+' + element.integration;
          }
      });
      if(type==1){
        MyIntegrationRecordlist.value=res.result.data
      }else{
        MyIntegrationRecordlist.value=res.result.data?MyIntegrationRecordlist.value.concat(res.result.data):[]
        if(currentPage.value==res.result.currentPage){
          loadStatus.value = "没有更多数据了";
        }
      }
    }
    
  })
}
const onpointsruleDetail = (item) => {
  uni.navigateTo({
    url: "/pages/user/pointsrule"
  });
};
onLoad((options) => {
  if(options.value){
    integration.value = options.value
  }
  getData(isGetRecord.value,1)
})
// 触底加载
onReachBottom(() => {
  console.log("触底加载");
  if (MyIntegrationRecordlist.value.length >= totalCount.value) {
    loadStatus.value = "没有更多数据了";
    return
  }
  loadStatus.value = "正在加载中";
  currentPage.value++
  getData(isGetRecord.value,2);
});
// 下拉刷新
onPullDownRefresh(() => {
  console.log("下拉刷新");
  // 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
  loadStatus.value = "正在加载中";
  currentPage.value = 1
  totalCount.value = 0

  MyIntegrationRecordlist.value = [];
  getData(isGetRecord.value,1);
  setTimeout(() => {
    uni.stopPullDownRefresh();
  }, 300);
});
</script>
<style lang="scss">
page {
  background-color: #f3f3f3;
}
</style>
<style lang="scss" scoped>
.points-content {
  padding: 24rpx;
  box-sizing: border-box;
  overflow-y: hidden;
  .points-title{
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    margin-bottom: 24rpx;
    .tit{
      font-family: PingFang SC;
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-align: left;
      color: rgba(0, 0, 0, 0.6);
    }
    .nums{
      font-family: PingFang SC;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      text-align: left;
      color: rgba(214, 142, 68, 1);
    }
  }
  .points-info{
    width: 100%;
    border-radius: 16rpx;
    padding: 16rpx 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1;
    position: sticky;
    top: 0;
  }
}
</style>